<template>
  <div>
    <section class="demo-text">
      <input type="file" @change="importf($event)" webkitdirectory />
    </section>
    <filetree :fileList="fileList" @cilckfile="cilckfile"></filetree>
    <p
      style="text-align:right;padding-right:60px;    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 9999;
    pointer-events: none;"
    >@王睿杰 2019.7.18</p>
  </div>
</template>
<script>
import filetree from "./filetree";
function createDir(name) {
  return new Map([
    ["name", name],
    ["fileList", new Set()],
    ["dirlist", new Set()]
  ]);
}
export default {
  components: { filetree },
  data() {
    return {
      fileList: undefined
    };
  },
  methods: {
    cilckfile(file, leaf) {},
    importf(event) {
      const target = event.target;
      const files = target.files;
      this.fileList = this.CreatefileSystem(files);
    },
    CreatefileSystem(files) {
      let fileSystem, leaf;
      for (let item of files) {
        const dirlist =
          item.webkitRelativePath && item.webkitRelativePath.split("/");
        dirlist.pop();
        for (let dir of dirlist) {
          if (!leaf) {
            leaf = fileSystem || createDir(dir);
          } else {
            leaf = this.testDir(dir, leaf);
          }
          if (!fileSystem) {
            fileSystem = leaf;
          }
        }
        leaf && leaf.get("fileList").add(item.name);
        leaf && leaf.set(item.name, item);
        leaf = null;
      }
      return fileSystem;
    },
    testDir(dirname, leaf) {
      if (!leaf.get(dirname)) {
        leaf.get("dirlist").add(dirname);
        leaf.set(dirname, createDir(dirname));
      }
      return leaf.get(dirname);
    },
    deletefile(leaf, name) {
      return {
        deletefile: leaf.delete(name),
        deletefilename: leaf.get("fileList").delete(name)
      };
    },
    deleteDir(leaf, name) {
      return {
        deletedir: leaf.delete(name),
        deletedirname: leaf.get("dirlist").delete(name)
      };
    }
  }
};
</script>
